<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>保单发票申请</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" integrity="sha512-++bHK0UNrNHW3LVNLzgTm2G7uOH6Kd+Ved0sskOL0+TY7pr5AcWQgR19kdjAhyyiQRDjFwXubDGqTvjnS09HNA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha512-jGsMH83oKe9asCpkOVkBnUrDDTp8wl+adkB2D+//JtlxO4SrLoJdhbOysIFQJloQFD+C4Fl1rMsQZF76JjV0eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <![endif]-->
    <style>
        .m8 {
            margin-top: 8px;
        }

        .ml20 {
            margin-left: 20px;
        }



        .red {
            color: red;
            font-weight: bolder;
        }

        .form-horizontal .control-label {
            padding-top: 7px;
            margin-bottom: 0;
             text-align: left;
        }
    </style>

    <script>
        var type = null;
        $.validator.addMethod("phone", function(value, element) {
            var length = value.length;
            var mobile = /^(1)\d{10}$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写手机号码");

        $().ready(function(){
            var dzfpButton = $("#dzfpButton");
            var ptfpButton = $("#ptfpButton");
            var dzfpForm = $("form#dzfpForm");
            var ptfpForm = $("form#ptfpForm");
            var resultMessage = $("div#resultMessage");
            var messageBody = $("#messageBody");

            var dztfpValidate =  dzfpForm.validate();
            var patfpValidate =  ptfpForm.validate();
            dzfpButton.on('click',function (){
                var validate = dztfpValidate.form();
                var data = dzfpForm.serialize();
                if(validate===true){
                    $.post({
                        url:'${path}/insurance/user/order/invoicing?invoiceType='+type,
                        data:data,
                        success:function (result){
                            console.info(result);
                            if(result.code === 200){
                                alert("开票成功,关闭页面")
                                window.close();
                            }else {
                                messageBody.html(result.message)
                                resultMessage.modal()
                            }
                        }
                    })
                }
            })
            ptfpButton.on('click',function (){
                var validate = patfpValidate.form();
                var data = ptfpForm.serialize();
                if(validate===true){
                    $.post({
                        url:'${path}/insurance/user/order/invoicing?invoiceType='+type,
                        data:data,
                        success:function (result){
                            console.info(result);
                            if(result.code === 200){
                                alert("开票成功,关闭页面")
                                window.close();
                            }else {
                                messageBody.html(result.message)
                                resultMessage.modal()
                            }
                        }
                    })
                }
            })

            $('input[type=radio][name=optionsRadios]').bind("change",
                function () {
                    var value = $(this).val();
                    type = value;
                    if(value === '1'){
                        $("div#dzfp").show();
                        $("div#zzfp").hide();
                    }else{
                        $("div#dzfp").hide();
                        $("div#zzfp").show();
                    }
                });

        })
    </script>
</head>
<body>
<div class="row" style="height: 67px;background-color: #2b2b2b">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
</div>
<div class="modal fade" id="resultMessage" tabindex="1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">操作结果</h4>
        </div>
        <div class="modal-content">
            <div class="modal-body" id="messageBody">
            </div>
            <div class="modal-footer">
                <button type="button"   data-dismiss="modal" class="btn btn-primary">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div class="row " style="margin-top: 60px">
            <p>请仔细填写并核对开票所需相关信息，发票会于<span class="red">开标后</span>由保险公司构开具。专票会安排快递寄送，请注意查收，如有任何疑问，可致电我司4001361998客服专线
            </p>
        </div>
        <div class="row">
            <h2>发票信息</h2>
            <form class="form-inline">
                <div class="checkbox">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="ZDPP" checked> 增值税普通发票（电子发票）
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2"  value="ZZZP" >  增值税专用发票（纸质发票）
                    </label>
                </div>
            </form>
            <div id="dzfp" class="panel panel-default">
                <div class="panel-body" style="background-color: #DBDBDB">
                    <form class="form-horizontal" id="dzfpForm" >
                        <input type="hidden" name="id" value="${policy.id!""}"/>
                        <div class="form-group" class="form-group">
                            <label class="col-sm-2 control-label">公司名称</label>
                            <div class="col-sm-8 ">
                                <input class="form-control"  value="${policy.policyHolderName!''}" readonly type="text">
                            </div>
                        </div>
                        <div class="form-group" class="form-group">
                            <label class="col-sm-2 control-label">社会统一信用代码</label>
                            <div class="col-sm-8 ">
                                <input class="form-control"  value="${policy.policyUcc!''}" readonly type="text">
                            </div>
                        </div>
                        <div class="form-group" class="form-group">
                            <label class="col-sm-2 control-label"  for="invoiceEmail" >电子邮箱</label>
                            <div class="col-sm-8 ">
                                <input class="form-control" type="email"  id="invoiceEmail" name="invoiceEmail"  email required  data-msg-email="请填写正确电子邮箱"  data-msg-required="请填写电子邮箱" placeholder="请填写电子邮箱">
                            </div>
                        </div>
                        <div style="float: right">
                            <button type="button" class="btn btn-primary" id="dzfpButton">立即开票</button>
                        </div>
                    </form>
                </div>
            </div>
            <div id="zzfp" class="panel panel-default" style="display: none">
                <div class="panel-body" style="background-color: #DBDBDB">
                    <form class="form-horizontal" id="ptfpForm">
                        <input type="hidden" name="id" value="${policy.id!""}"/>
                        <div class="form-group" class="form-group">
                            <label class="col-sm-2 control-label">公司名称</label>
                            <div class="col-sm-8 ">
                                <input class="form-control"  value="${policy.policyHolderName!''}" readonly type="text">
                            </div>
                        </div>
                        <div class="form-group" class="form-group">
                            <label class="col-sm-2 control-label">社会统一信用代码</label>
                            <div class="col-sm-8 ">
                                <input class="form-control"  value="${policy.policyUcc!''}" readonly type="text">
                            </div>
                        </div>
                        <div class="form-group" class="form-group">
                            <label class="col-sm-2 control-label">公司注册地址</label>
                            <div class="col-sm-8 ">
                                <input class="form-control"  name="invoiceRegisteredAddress" required data-msg-required="请输入公司注册地址" type="text">
                            </div>
                        </div>
                        <div class="form-group" class="form-group">
                            <label class="col-sm-2 control-label">联系电话</label>
                            <div class="col-sm-8 ">
                                <input class="form-control" name="invoicePhoneNo"  required data-msg-required="请输入联系电话" type="text">
                            </div>
                        </div>
                        <div class="form-group" class="form-group">
                            <label class="col-sm-2 control-label">开户行名称</label>
                            <div class="col-sm-8 ">
                                <input class="form-control"  name="invoiceBankInfo" required data-msg-required="请输入开户行名称"  type="text">
                            </div>
                        </div>
                        <div class="form-group" class="form-group">
                            <label class="col-sm-2 control-label" >开户行账号</label>
                            <div class="col-sm-8 ">
                                <input class="form-control" name="invoiceBankAcc" required data-msg-required="请输入开户行账号"  type="text">
                            </div>
                        </div>
                        <div class="form-group" class="form-group">
                            <label class="col-sm-2 control-label">发票收件人名称</label>
                            <div class="col-sm-8 ">
                                <input class="form-control"  name="invoiceAddressee" required data-msg-required="请输入发票收件人名称"  type="text">
                            </div>
                        </div>
                        <div class="form-group" class="form-group">
                            <label class="col-sm-2 control-label">发票收件人手机号</label>
                            <div class="col-sm-8 ">
                                <input class="form-control"  name="invoiceAddresseePhone" data-rule-phone="true"  required data-msg-required="请输入发票收件人手机号"  type="text">
                            </div>
                        </div>
                        <div class="form-group" class="form-group">
                            <label class="col-sm-2 control-label">发票收件地址</label>
                            <div class="col-sm-8 ">
                                <input class="form-control"  name="invoiceAddress" required data-msg-required="请输入发票收件地址"  type="text">
                            </div>
                        </div>
                        <div style="float: right">
                            <button type="button" class="btn btn-primary" id="ptfpButton">立即开票</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>